<!-- 项目佣金激励报表的详情的订单信息-->
<template>
  <div class="staffCommissionView">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/projectCommissionIncentiveStatement' }">项目佣金激励报表</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/projectCommissionIncentiveView',query:{month:this.form.month} }">查看</el-breadcrumb-item>
      <el-breadcrumb-item>订单详情</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="客户名称：">
        <el-input placeholder="请输入客户名称" v-model.trim="form.customerName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getSearch" id="monitorEnter">查询</el-button>
        <el-button type="primary" @click="exportOrder">导出</el-button>
        <el-button type="primary" v-if="beforeAdjust" @click="beforeAdjustment">调整前</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
      <el-table-column label="客户信息" align="center">
        <el-table-column label="楼盘名称" prop="devName" align="center"></el-table-column>
        <el-table-column label="客户姓名" prop="customerName" align="center"></el-table-column>
        <el-table-column label="房号" prop="houseInfo" align="center"></el-table-column>
      </el-table-column>
      <el-table-column label="跟进日期" align="center">
        <el-table-column label="认购日期" prop="purchaseTime" align="center"></el-table-column>
        <el-table-column label="签约日期" prop="signTime" align="center"></el-table-column>
        <el-table-column label="交易及佣金日期" prop="commConformTime" align="center"></el-table-column>
        <el-table-column label="回款日期" prop="returnConformTime" align="center"></el-table-column>
      </el-table-column>
      <el-table-column
        v-for="item in headerList"
        :key="item.id"
        :label="item.headerName"
        align="center"
      >
        <el-table-column label="计提基数" align="center">
          <template slot-scope="scope">
            <span>
              {{provision(scope.row.innerList,item.headerId) && formats(provision(scope.row.innerList,item.headerId).drawBaseAmount)}}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="计提节点" width="150px" align="center">
          <template slot-scope="scope">
            <span>{{ provision(scope.row.innerList,item.headerId) && provision(scope.row.innerList,item.headerId)['drawNode']}}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="beforeAdjust" label="计提金额（元）" width="150px" align="center">
          <template slot-scope="scope">
            <span>
              <el-input
                size="small"
                type="number"
                v-if="clearingFlag && provision(scope.row.innerList,item.headerId)"
                @blur="editDrawAmount(provision(scope.row.innerList,item.headerId)['id'],provision(scope.row.innerList,item.headerId)['drawAmount'])"
                v-model="provision(scope.row.innerList,item.headerId)['drawAmount']"
              ></el-input>
              <span v-else>{{provision(scope.row.innerList,item.headerId) && formats(provision(scope.row.innerList,item.headerId)['drawAmount'])}}</span>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-else label="计提金额（元）" width="100px" align="center">
          <template slot-scope="scope">
            <span>{{formats(provision(scope.row.innerList,item.headerId)['drawAmount'])}}</span>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column fixed="right" v-if="beforeAdjust" align="center" label="订单明细">
        <template slot-scope="scope">
          <el-button @click="goDetail(scope.row.orderId)" type="text">查看</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagebar">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page.sync="form.pageNum"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="form.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import utils from "@/common/utils.js";
export default {
  name: "projectCommissionIncentiveViewDetail",
  data() {
    return {
      form: {
        customerName: "",
        devId: 640,
        month: "2019-12",
        pageSize: 10,
        pageNum: 1
      },
      time: [],
      total: 0,
      beforeAdjust: true,
      tableData: [],
      headerList: [],
      clearingFlag: true
    };
  },
  created() {
    this.form.devId = this.$route.query.devId;
    this.form.month = this.$route.query.month;
    this.getList();
  },
  mounted() {
    if (window.history && window.history.pushState) {
      window.history.pushState(null, null, document.URL);
      window.addEventListener("popstate", this.goBack, false);
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.goBack, false);
  },
  methods: {
    editDrawAmount(id, drawAmount) {
      var reg = /^(-)?(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/;
      if (reg.test(drawAmount) && drawAmount > 0) {
        this.$axios
          .post("/commallocation/orderDrawInfo/orderEditDrawAmount", {
            id,
            drawAmount: drawAmount
          })
          .then(res => {
            this.$message.success("计提金额修改成功！");
          });
      } else {
        this.$message.error("计提金额应该大于零，并且只能输入两位小数！");
      }
    },
    // 计提方法
    provision(innerList, headerId) {
      for(let item of innerList) {
        let rowStr = `${item.commType}-${item.secType}-${item.thirdType}`;
        if(headerId === rowStr) {
          return item
        }
      }
    },
    formats(num) {
      return utils.formatMoney(num);
    },
    goBack() {
      if (!this.beforeAdjust) {
        this.beforeAdjust = true;
        this.getList();
      }
    },
    getList() {
      this.$axios
        .post("/commallocation/orderDrawInfo/orderPageListEx", this.form)
        .then(res => {
          this.tableData = res.pageInfo.list;
          this.total = res.pageInfo.total;
          this.headerList = res.headerList;
          this.clearingFlag = res.clearingFlag === 0 ? true : false;
        });
    },
    exportOrder() {
      let beforeFlag;
      if(this.beforeAdjust) {
        beforeFlag = 0;
      }else {
        beforeFlag = 1;
      }
      this.$axios
        .post("/commallocation/orderDrawInfo/orderPageListExport", {
          devId: this.form.devId,
          month: this.form.month,
          beforeFlag
        })
        .then(res => {
          this.$alert('已导出，请前往报表查询下载', {
            confirmButtonText: '确定',
          });
        })
    },
    getSearch() {
      this.form.pageNum = 1;
      this.getList();
    },
    beforeAdjustment() {
      this.beforeAdjust = false;
      this.getList();
    },
    goDetail(orderId) {
      this.$router.push({
        path: "./detailorder",
        query: {
          orderId: orderId
        }
      });
    },
    settlement() {
      this.$confirm("是否结算，结算后不可更改报表，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$axios.post("").then(res => {
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    handleCurrentChange() {
      this.getList();
    },
    handleSizeChange(val) {
      this.form.pageSize = val;
      this.getList();
    }
  }
};
</script>

<style lang="stylus"></style>
